<!DOCTYPE HTML>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>首页-摊位/市场租赁平台</title>
    <script type="text/javascript" th:src="@{/asserts/js/jQuery-3.6.0.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/reset.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/global.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/web.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/k15.css}"/>
    <script th:src="@{/asserts/js/vue.js}"></script>

</head>
<body class="W-body">

<!-- 视图区 -->
<div id="app">
    <header th:replace="~{commons/tag::headerBar}"></header>

    <div class="in-wrap container" style="height: auto">
        <br>
        <p th:text="${rentStall.stallName}" style="font-size: 25px"></p>
        <p class="fr" style="font-size: 20px;color: red ;background: lightgrey">火热招商中</p>
        <br>
        <div style="border: 1px solid antiquewhite;height: 400px;padding: 10px;">

            <div>
                <img th:src="'http://localhost:8888/img/'+${rentStall.stallImg}" width="580px" height="400px"
                     class="picImg fl">
            </div>
            <div style="font-size: 20px">
                <br>&nbsp;
                租金：<span style="color: red" th:text="${rentStall.rentPrice}"></span>元/月
                <br>&nbsp;
                <p>&nbsp;&nbsp;租赁方式：整租</p>
                <br>&nbsp;
                <p>&nbsp;&nbsp;摊位面积：<span th:text="${rentStall.area}"></span>m²</p>
                <br>&nbsp;
                <p>&nbsp;&nbsp;摊位详情：<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6cbec6" th:text="${rentStall.introduce}"></span></p>
                <br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;
                <span type="text" id="user" th:text="${session.userInfo.username}" style="display: none"></span>
                <button style="width: 100px;height: 50px;font-size: 20px;color: white;background-color: red;border: 0px"
                        th:onclick="|lease('${rentStall.stallId}')|">立即租下
                </button>
            </div>
            <br>
            <p style="font-size: 20px;text-align: center">客服热线：114-110-119-120&nbsp;&nbsp;期待您的加入！</p>
        </div>

    </div>
    <br>
    <!-- 公共底引入 -->
    <footer th:replace="~{commons/tag::footBar}"></footer>
</div>
</div>
<script>
    function lease(stallId) {
        console.log(stallId);
        var user =document.getElementById("user").innerHTML;
        console.log(user);
        $.ajax({
            url:"http://localhost:9009/order/rentStall",
            async:false,
            data: {
                "username":user,
                "stallId":stallId
            },
            type:"get",
            success:function (result){
                console.log(result);
                alert("恭喜，下单成功啦！")
                location.href="/index/main";
            }
        })
    }
</script>

<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {},
        methods: {},
    });

</script>
</body>
</html>
